<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<style>
    #laydate_today{
        display: none !important;
    }
</style>
<form:form commandName="taskMain" cssClass="form-horizontal" role="form" onsubmit="return false;" enctype="multipart/form-data" >
    <div class="form-group">
        <label class="col-sm-2 control-label ">子事项</label>
        <div class="col-sm-8">
            <input type="text" name="subName" placeholder="请输入子事项" class="form-control required" >
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label ">牵头单位</label>
        <div class="col-sm-8">
            <select multiple="true" class="e2" onchange="Monitor(this)">
            </select>
            <input type="hidden" value="" name="leadDeptIds">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label ">协办单位</label>
        <div class="col-sm-8">
            <select multiple="true" class="e22 xieban" onchange="Monitor1(this)">
            </select>
            <input type="hidden" value="" name="assistDeptIds">
        </div>
    </div>
<%--    <div class="form-group">--%>
<%--        <label class="col-sm-2 control-label ">任务时限</label>--%>
<%--        <div class="col-sm-8">--%>
<%--            <input type="text" value="" name="subTimeLimit" id="date_picker" readonly lay-verify="date" placeholder="年-月-日" autocomplete="off" class="layui-input form-control">--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="evalRules">周期类型<font color="red">*</font></label>
        <div class="col-sm-3">
            <select name="timeType" id="theruleName" onchange="chanceSelect(this.options[this.options.selectedIndex].value)">
<%--                <option value="">请选择</option>--%>
                <option value="多时限">多时限</option>
                <option value="单时限">单时限</option>
                <option value="天">天</option>
                <option value="周">周</option>
                <option value="月">月</option>
                <option value="季度">季度</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="evalRules">时限<font color="red">*</font></label>
        <div class="col-sm-5" id="shijianxuanxiang">
            <input type="text" name="cell4"   value="${excelData.cell4}" class="form-control chance2_1_17" required >
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label ">抄送</label>
        <div class="col-sm-8">
            <select multiple="true" id="e1" class="caosong" onchange="CC(this)">
            </select>
        </div>
    </div>
    <input type="hidden" name="taskMainId" value="${taskMain.sysId}">
</form:form>
<script src="<s:url value="/assets/js/chosen.jquery.js"></s:url>"></script>
<script src="<s:url value="/assets/js/ajaxfileupload.js"></s:url>"></script>
<script src="<s:url value="/assets/js/modal/modal.js"></s:url>"></script>
<script src="<s:url value="/assets/js/select2.js"></s:url>"></script>
<script src="<s:url value="/assets/laydate/laydate.dev.js"></s:url>"></script>

<script type="text/javascript">
    $("#e1").select2({
        placeholder: "请输入或点击选择抄送对象",
        width: "100%",
        closeOnSelect: false,
        allowClear: true,
    });
    $(".e2").select2({
        placeholder: "请输入或点击选择牵头单位",
        width: "100%",
        closeOnSelect: false,
        allowClear: true,
    });
    $(".e22").select2({
        placeholder: "请输入或点击选择协办单位",
        width: "100%",
        closeOnSelect: false,
        allowClear: true,
    });
    var danwei = "";
    var xianlingdao = "";
    var danweiArr = [];
    (function () {
        $.ajax({
            type:"POST",
            data:{deptId:""},
            url:"/taskMain/cbDeptList/",
            async:false,
            success:function (data) {
                for (var i = 0; i<data.length; i++){
                    danwei += " <option value=\""+ data[i].sysId +"\">"+data[i].deptName +"</option>";
                    danweiArr.push({danweiSysId:data[i].sysId,danweiName:data[i].deptName});
                }
            }
        })
        $.ajax({
            url:"/taskMain/leaderList/",
            async:false,
            success:function (data) {
                for (var i = 0; i<data.length;i++ ){
                    xianlingdao += " <option value=\""+ data[i].sysId +"\">"+data[i].name +"</option>";
                }
            }
        })
    })();
    $("select.e2").html(danwei);
    $("select#e1").html(xianlingdao);
    function Monitor(data)  {
        var $data = $(data).val();//获取全部select的值
        console.log($data)
        //临时数组存放
        var tempArray1 = []; //临时数组1
        var tempArray2 = []; //临时数组2
        for (var i = 0; i < $data.length; i++) {
            tempArray1[$data[i]] = true; //将数array2 中的元素值作为tempArray1 中的键，值为true；
        }
        for (var i = 0; i < danweiArr.length; i++) {
            if (!tempArray1[danweiArr[i].danweiSysId]) {
                tempArray2.push(danweiArr[i]); //过滤array1 中与array2 不相同的元素；
            }
        }
        var xieban;
        for (var i = 0; i<tempArray2.length; i++){
            xieban +=  " <option value=\""+ tempArray2[i].danweiSysId +"\">"+tempArray2[i].danweiName +"</option>"
        }
        $(data).parent().parent().siblings().find("select.xieban").html(xieban);
        $(data).siblings("input").val($(data).val().join(","));
    };
    function Monitor1(data) {
        $(data).siblings("input").val($(data).val().join(","));
    };
    function CC(data) {
        $(data).siblings("input").val($(data).val().join(","));
    }

</script>
<script>
function chanceSelect(data){
    var xuanxianghtml = ""
    if(data == "多时限"){
        xuanxianghtml = "<div class='form-group'>" +
            "    <div class=\"col-sm-8\">\n" +
            "        <input type=\"text\" placeholder=\"年-月-日\"   onblur=\"addTimeBtnData()\"     class=\"form-control  Zdate_picker date_picker danyan\" readonly>\n" +
            "    </div>\n" +
            "    <div class=\"col-sm-1 addTime\">\n" +
            "        <input type=\"button\" class=\"btn btn-sm btn-success\" onclick='addTimeBtn(this)' value=\"添加时限\">\n" +
            "        <input id=\"cell4Id\" type=\"hidden\" name=\"subTimeLimit\" class=\"form-control\" >\n" +
            "    </div>\n" +
            "    </div>"
    }
    if(data == "单时限"){
        xuanxianghtml = "<div class='form-group'>" +
            "    <div class=\"col-sm-8\">\n" +
            "        <input type=\"text\" class=\"form-control Zdate_picker  date_picker transform\"  name=\"subTimeLimit\" readonly>\n" +
            "    </div>\n" +
            "    </div>"
    }
    if(data == "天"){
            xuanxianghtml = "<input type=\"number\" class=\"form-control\" min='0' name=\"subTimeLimit\"  placeholder=\"请输入天数\">"
    }
    if(data == "周"){
            xuanxianghtml  = "      <select name=\"subTimeLimit\" class=\"form-control\" value=\"\" >\n" +
                "            <option value=\"1\">星期一</option>\n" +
                "            <option value=\"2\">星期二</option>\n" +
                "            <option value=\"3\">星期三</option>\n" +
                "            <option value=\"4\">星期四</option>\n" +
                "            <option value=\"5\">星期五</option>\n" +
                "            <option value=\"6\">星期六</option>\n" +
                "            <option value=\"7\">星期日</option>\n" +
                "        </select>"
    }
    if(data == "月"){
        xuanxianghtml  = "<input type=\"text\" id=\"DBdate_picker\" value=\"\" readonly lay-verify=\"date\" name=\"subTimeLimit\" placeholder=\"日\" autocomplete=\"off\" class=\"layui-input form-control\">\n"
    }
    if(data == "季度"){
            xuanxianghtml  = "<input type=\"text\" value = \"\"    readonly lay-verify=\"date\" placeholder=\"年-月-日\" name=\"subTimeLimit\" autocomplete=\"off\" class=\"layui-input form-control date_picker\">\n"
    }
    $("#shijianxuanxiang").html(xuanxianghtml)
}
function addTimeBtn(e) {
    var html = " <div class=\"form-group\">" +
        "   <div class=\"col-sm-8\">\n" +
        "       <input  type=\"text\" value=\"\" readonly lay-verify=\"date\" onblur=\"addTimeBtnData()\"    placeholder=\"年-月-日\" autocomplete=\"off\" class=\"layui-input form-control date_picker danyan\">\n" +
        "</div>\n" +
        "    <div class=\"col-sm-1 addTime\">\n" +
        "        <input type=\"button\" class=\"btn btn-sm btn-danger removeTimeBtn\"  value=\"删除时限\">\n" +
        "    </div>"
    "</div>"
    $(e).parent().parent().parent().append(html);
}

function addTimeBtnData(){
    setTimeout(function(){
        var value = [];
        $(".danyan").each(function() {
            value.push($(this).val());
        });
        $('#cell4Id').attr('value',value.join(","))
    },200)
}
chanceSelect("多时限")
$(document).on("click","#DBdate_picker",function () {
    laydate({
        elem: "#DBdate_picker",
        format: 'YYYY-MM-DD',
        // min: minDate(),
        choose: function(data){
            //将值赋值给input框
            var $checked = $("input[name='period2']:checked").val();
            data = data.substring(data.length-2)
            $("#DBdate_picker").val(data);
        }
    });
});
</script>